<template>
  <el-dialog
    v-model="dialogVisiblesales"
    width="1200px"
    title="选择销售合同"
    draggable
    overflow
    @close="handleClose"
  >
    <template #footer>
      <el-form :model="searchForm" label-width="auto" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="合同编号">
              <el-input
                v-model="searchForm.contractNo"
                placeholder="请输入 合同编号"
                class="!w-[200px]"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同名称">
              <el-input
                v-model="searchForm.contractName"
                placeholder="请输入 合同名称"
                class="!w-[200px]"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input
                v-model="searchForm.projectName"
                placeholder="请输入 项目名称"
                class="!w-[200px]"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: left">
            <el-button
              color="#1E3485"
              :icon="Search"
              @click="
                tablePage.currentPage = 1;
                getlist();
              "
              >搜索</el-button
            >
            <el-button type="default" :icon="Delete" @click="clearAllFields"
              >清空</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <vxe-table
        border
        min-height="300"
        :column-config="{ resizable: true }"
        :row-config="{ keyField: 'id' }"
        :data="TableData"
        :radio-config="radioConfig"
        show-footer
        size="small"
        @radio-change="radioChangeEvent"
      >
        <vxe-column type="radio" width="40" />
        <vxe-column
          field="contractNo"
          title="合同编号"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="contractName"
          title="合同名称"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="projectName"
          title="项目名称"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="contractTotalPrice"
          title="合同总额(元)"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="priceType"
          title="价格类型"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="projectDeptName"
          title="所属公司"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="supplierDeptName"
          title="供应厂商"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
      </vxe-table>
      <vxe-pager
        v-model:current-page="tablePage.currentPage"
        v-model:page-size="tablePage.pageSize"
        :layouts="[
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total'
        ]"
        :total="tablePage.total"
        size="small"
        @page-change="handlePageChange"
      />
      <div class="dialog-footer">
        <el-button type="primary" color="#1E3485" @click="go()">
          确认
        </el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from "vue";
import { VxeTablePropTypes } from "vxe-table";
import { getSalesContractsList } from "@/api/ERP_sales";
import { Search, Upload, Delete } from "@element-plus/icons-vue";

const emit = defineEmits(["close", "confirm"]);

onMounted(async () => {
  getlist();
});
function handleClose() {
  emit("close", false);
}
const TableData = ref([]);
const radioConfig = reactive<VxeTablePropTypes.RadioConfig>({
  checkRowKey: ""
});
// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean
});

//获取销售合同列表
const getlist = (query?: string) => {
  let params: any = {};
  params.pageIndex = tablePage.currentPage;
  params.pageSize = tablePage.pageSize;
  params.contractNo = searchForm.contractNo;
  params.contractName = searchForm.contractName;
  params.projectName = searchForm.projectName;
  params.auditStatus = "2";
  params.contractMethod = 0
  getSalesContractsList(params).then((response: any) => {
    response.data.records.forEach(res => {
      if (res.priceType == "0") {
        res.priceType = "锁定";
      } else if (res.priceType == "1") {
        res.priceType = "浮动";
      }
    });
    TableData.value = response.data.records;
    tablePage.total = response.data.totalElements;
  });
  if (query) {
    setTimeout(() => {
      getSalesContractsList;
    }, 1500);
  }
};

const dialogVisiblesales = ref(false);

const searchForm = reactive({
  contractNo: "",
  contractName: "",
  projectName: ""
});

// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});
// 表格分页事件
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getlist();
};

watch(
  () => props.visible,
  val => {
    dialogVisiblesales.value = val;
  },
  { immediate: true }
);
const selectRow = ref(null);
//单击事件
const radioChangeEvent = ({ row }) => {
  selectRow.value = row;
};
function go() {
  emit("close", selectRow);
  dialogVisiblesales.value = false;
}

// 清空按钮点击事件
const clearAllFields = () => {
  // 重置SearchForm对象的所有属性
  for (const key in searchForm) {
    if (searchForm.hasOwnProperty(key)) {
      if (key === "signDate") {
        // searchForm[key] = [];
        searchForm[key] = null;
      } else {
        searchForm[key] = "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin-top: 20px;
}
</style>
